.search {
    border: 1px solid var(--border);
    max-width: 215px;
    width: 100%;
    display: flex;
    height: 28px;
    position: relative;
    border-radius: 3px;
    background: var(--main-color-body);
  
    .text {
      display: flex;
      align-items: center;
      gap: 5px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
  
    input {
      flex: 1;
      height: 100%;
      border-radius: inherit;
      background: transparent;
      padding: 0 6px;
      color: var(--inverted-main-color);
    }
  
    .list {
      position: absolute;
      top: 110%;
      left: 0;
      width: 100%;
      border: 1px solid var(--border);
      background: var(--main-color-body);
      min-height: 100px;
      // max-height: 400px;
      z-index: 10;
      padding: 10px;
      border-radius: 2px;
      overflow-y: auto;
      > div {
        > div {
          padding: 4px;
          cursor: pointer;
        }
      }
    }
  
    .close {
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 100%;
      background: var(--border);
      cursor: pointer;
    }
  }